import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle, faUser, faClock } from '@fortawesome/free-solid-svg-icons';

export default function ActivityCard({ activities }) {
  // 时间格式化函数
  const formatTime = (dateString) => {
    const date = new Date(dateString);
    const now = new Date();
    const diff = Math.floor((now - date) / 1000); // 秒数差
    
    if (diff < 60) {
      return '刚刚';
    } else if (diff < 3600) {
      return `${Math.floor(diff / 60)} 分钟前`;
    } else if (diff < 86400) {
      return `${Math.floor(diff / 3600)} 小时前`;
    } else if (diff < 2592000) {
      return `${Math.floor(diff / 86400)} 天前`;
    } else {
      return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    }
  };
  
  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      <div className="px-6 py-4 border-b border-gray-200">
        <h3 className="text-lg font-medium text-gray-900">最近活动</h3>
      </div>
      <div className="px-6 py-4">
        <ul className="divide-y divide-gray-200">
          {activities && activities.length > 0 ? (
            activities.map((activity, index) => (
              <li key={index} className="py-3 flex items-start">
                <div className="mr-4 mt-1">
                  <div className={`flex items-center justify-center h-10 w-10 rounded-full ${
                    activity.type === 'user' ? 'bg-blue-100 text-blue-600' :
                    activity.type === 'system' ? 'bg-purple-100 text-purple-600' :
                    activity.type === 'alert' ? 'bg-red-100 text-red-600' :
                    'bg-green-100 text-green-600'
                  }`}>
                    <FontAwesomeIcon 
                      icon={activity.icon || faUser} 
                      className="h-5 w-5" 
                    />
                  </div>
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-gray-900 mb-1">
                    {activity.title}
                  </p>
                  <p className="text-sm text-gray-500">
                    {activity.description}
                  </p>
                  <div className="flex items-center mt-2 text-xs text-gray-400">
                    {activity.user && (
                      <>
                        <FontAwesomeIcon icon={faUser} className="mr-1" />
                        <span className="mr-3">{activity.user}</span>
                      </>
                    )}
                    <FontAwesomeIcon icon={faClock} className="mr-1" />
                    <span>{formatTime(activity.time)}</span>
                  </div>
                </div>
                {activity.status && (
                  <div className="ml-4 flex-shrink-0 flex items-center">
                    <FontAwesomeIcon 
                      icon={faCircle} 
                      className={`h-2 w-2 mr-1 ${
                        activity.status === 'completed' ? 'text-green-500' :
                        activity.status === 'pending' ? 'text-yellow-500' :
                        activity.status === 'failed' ? 'text-red-500' :
                        'text-gray-500'
                      }`} 
                    />
                    <span className="text-xs font-medium capitalize">
                      {activity.status === 'completed' ? '已完成' :
                       activity.status === 'pending' ? '进行中' :
                       activity.status === 'failed' ? '失败' :
                       activity.status}
                    </span>
                  </div>
                )}
              </li>
            ))
          ) : (
            <li className="py-3 text-center text-gray-500">
              暂无活动记录
            </li>
          )}
        </ul>
      </div>
      {activities && activities.length > 0 && (
        <div className="bg-gray-50 px-6 py-3">
          <a href="#" className="text-sm font-medium text-blue-600 hover:text-blue-800">
            查看所有活动 &rarr;
          </a>
        </div>
      )}
    </div>
  );
} 